<template>
  <div>
    <!-- 筛选区域 -->
    <el-form :inline="true" :model="queryParams" class="filter-form">
      <el-form-item label="订单编号：">
        <el-input v-model="queryParams.orderNo" placeholder="请输入订单号" clearable />
      </el-form-item>
      <el-form-item label="商品名称：">
        <el-input v-model="queryParams.productName" placeholder="请输入商品名称" clearable />
      </el-form-item>
      <el-form-item label="店铺名称：">
        <el-input v-model="queryParams.shopName" placeholder="请输入店铺名称" clearable />
      </el-form-item>
      <el-form-item label="买家昵称：">
        <el-input v-model="queryParams.buyerName" placeholder="请输入买家昵称" clearable />
      </el-form-item>
      <el-form-item label="收货人：">
        <el-input v-model="queryParams.receiver" placeholder="请输入收货人姓名" clearable />
      </el-form-item>
      <el-form-item label="配送员：">
        <el-input v-model="queryParams.deliveryMan" placeholder="请输入配送员姓名" clearable />
      </el-form-item>
      <el-form-item label="手机号：">
        <el-input v-model="queryParams.phone" placeholder="请输入任意人手机号" clearable />
      </el-form-item>
      <el-form-item label="创建时间：">
  <el-select v-model="queryParams.createTime" placeholder="全部" style="width: 150px">
    <el-option label="全部" value="" />
    <el-option label="本月内" value="this_month" />
    <el-option label="近三个月" value="last_3_months" />
    <el-option label="今年内" value="this_year" />
    <el-option label="2024年" value="2024" />
    <el-option label="2023年" value="2023" />
    <el-option label="2023年以前" value="before_2023" />
  </el-select>
</el-form-item>
      <el-form-item label="订单状态：">
  <el-select v-model="queryParams.status" placeholder="全部异常状态" style="width: 180px">
    <el-option label="全部异常状态" value="" />
    <el-option label="未到店预警" value="not_arrived_warning" />
    <el-option label="未离店预警" value="not_left_warning" />
    <el-option label="未送达预警" value="not_delivered_warning" />
    <el-option label="超时未到店" value="timeout_not_arrived" />
    <el-option label="超时未送达" value="timeout_not_delivered" />
    <el-option label="待商家退款" value="pending_refund" />
    <el-option label="商家拒绝退款" value="refuse_refund" />
  </el-select>
</el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">清除条件</el-button>
      </el-form-item>
    </el-form>
    <!-- 这里是全部订单的内容 -->
    <p>全部订单内容</p>
  </div>

  <div>
    <el-table :data="orders" border style="width: 100%" class="order-table" :show-header="false">
      <el-table-column>
        <template #default="scope">
          <!-- 订单头部 -->
          <div class="order-header">
            <span>订单号：{{ scope.row.orderNo }}</span>
            <span>创建时间：{{ scope.row.createTime }}</span>
            <span>买家：{{ scope.row.buyer }}</span>
          </div>
          <!-- 商品信息 -->
          <div class="order-body">
            <img :src="scope.row.product.img" class="product-img" />
            <div class="product-info">
              <div>{{ scope.row.product.name }}</div>
              <div>规格：{{ scope.row.product.spec }}</div>
              <div>分类：{{ scope.row.product.type }}</div>
              <div>￥{{ scope.row.product.price }} <span class="original-price">(原价￥{{ scope.row.product.originalPrice }})</span></div>
            </div>
            <div class="product-qty">x{{ scope.row.quantity }}</div>
            <div class="receiver">
              <div>{{ scope.row.receiver }}</div>
              <div>{{ scope.row.receiverAddress }}</div>
            </div>
            <div class="delivery-man">
              <div>{{ scope.row.deliveryMan.name }}</div>
              <div>{{ scope.row.deliveryMan.phone }}</div>
            </div>
            <div class="pay">
              <div>￥{{ scope.row.pay }}</div>
              <div class="pay-detail">({{ scope.row.payDetail }})</div>
            </div>
            <div class="after-sale">
              <div>{{ scope.row.afterSale }}</div>
              <div class="after-sale-detail">{{ scope.row.afterSaleDetail }}</div>
            </div>
            <div class="status">
              <div>{{ scope.row.status }}</div>
              <el-tag :type="scope.row.statusTagType" size="small">{{ scope.row.statusTag }}</el-tag>
            </div>
            <div class="actions">
              <el-link v-for="action in scope.row.actions" :key="action" type="primary" style="margin-right: 8px;">{{ action }}</el-link>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>

const orders = [
  // 这里填充你的订单数据，结构如上
]
import { reactive } from 'vue'

const queryParams = reactive({
  orderNo: '',
  productName: '',
  shopName: '',
  buyerName: '',
  receiver: '',
  deliveryMan: '',
  phone: '',
  createTime: '',
  status: ''
})

function handleSearch() {
  // 这里写搜索逻辑
  // console.log(queryParams)
}
function handleReset() {
  Object.keys(queryParams).forEach(key => queryParams[key] = '')
}
</script>

<style scoped>
.filter-form {
  margin-bottom: 20px;
}

.order-table {
  background: #fff;
}
.order-header {
  background: #f7f8fa;
  padding: 8px 16px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  display: flex;
  gap: 32px;
}
.order-body {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 8px solid #f7f8fa;
}
.product-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 16px;
  border-radius: 6px;
  border: 1px solid #eee;
}
.product-info {
  min-width: 180px;
  margin-right: 16px;
}
.product-qty {
  width: 40px;
  text-align: center;
  margin-right: 16px;
}
.receiver, .delivery-man, .pay, .after-sale, .status, .actions {
  min-width: 120px;
  margin-right: 16px;
}
.original-price {
  color: #aaa;
  text-decoration: line-through;
  font-size: 12px;
  margin-left: 4px;
}
.status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
</style>
